    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>两边侧边栏固定</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                position: relative;
            }
            #poetry{
                width: 200px;
                height: 2000px;
                margin: 50px auto;

            }
            #imgs1{
                position: absolute;
                left: 0;
                top: 200px;
            }
            #imgs2{
               position: absolute;
                right: 0;
                top: 200px;
            }
        </style>
        <script src="../公共函数.js"></script>
    </head>
    <body>
    <div id="poetry">
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>本该新春华夏庆，无奈疫情笼中华。</p>
    <p>地铁中枢严把关，一丝不苟申通人。</p>
    <p>日巡夜检不懈怠，守护家人暂无暇。</p>
    <p>上下一心克魔疫，定把春风送万家。</p>

            <img id="imgs1" src="imgs/111.jpg" alt="">
            <img id="imgs2" src="imgs/111.jpg" alt="">
    </div>
    <script>

    // 需求分析：在滑下滑轮时候两侧边栏广告跟随
        var img1=document.getElementById('imgs1');
        var img2=document.getElementById('imgs2');
        var target=0;
        // var timer=null;
        var dis=0;
        console.log(img1);
        console.log(img2);
       window.onscroll=function () {
           dis=scroll().top+100;
           animation(img1,dis);
           animation(img2,dis);
       };
//封装了两个函数 以下两个函数都可以达到效果，但是功能不同第一个直接取值步长 第二个是渐进逼近效果好许多
    function animation(ele,target) {
        clearInterval(ele.timer);
        var speed=target>ele.offsetTop?10:-10;
        ele.timer=setInterval(function () {
            ele.style.top=ele.offsetTop+speed+'px';
            if(Math.abs(target-ele.offsetTop)<=Math.abs(speed)){
                ele.style.top=target+'px';
                clearInterval(ele.timer);
                console.log("验证函数")
            }
        },20)
    }
    function animate(ele,target) {
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            var step = (target-ele.offsetTop)/10;
            step = step>0?Math.ceil(step):Math.floor(step);
            ele.style.top = ele.offsetTop + step + "px";
            console.log(1);
            if(Math.abs(target-ele.offsetTop)<Math.abs(step)){
                ele.style.top = target + "px";
                clearInterval(ele.timer);
            }
        },25);
    }
    </script>
    </body>
    </html>